<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        .aui-card-list-header {
            color: #0589F9;
            justify-content: flex-start;
            font-size: .85rem;
            padding-bottom: 0;
        }

        .aui-radio {
            width: 1rem;
            height: 1rem;
            vertical-align: sub;
        }

        .aui-radio:checked {
            background-color: #0589F9;
            border-color: #0589F9;
        }

        .shop_name {
            margin-left: .5rem;
            position: relative;
        }

        .shop_name:before {
            content: '';
            width: 0.35rem;
            height: 0.35rem;
            position: absolute;
            top: 50%;
            right: -0.6rem;
            margin-top: -0.2rem;
            background: transparent;
            border: 1px solid #0589F9;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }

        .aui-card-list {
            margin-bottom: 0;
        }

        .aui-list {
            background-image: none;
        }

        .aui-list .aui-list-item {
            padding: 0;
            margin: .5rem .75rem 0;
        }

        .aui-list .aui-list-item:last-child {
            margin: 0;
            border-bottom: .5rem solid #f6f6f6;
            padding: .5rem .75rem 0;
            background-image: none;
        }

        .aui-list .aui-list-item-media {
            padding-right: .6rem;
        }

        .aui-list .radio_media {
            width: auto;
            align-items: center;
        }

        .aui-list .describe {
            padding-right: 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
        }

        .aui-list .describe .aui-text-danger {
            font-size: .65rem;
            text-align: right;
            white-space: nowrap;
        }

        .aui-list .describe img {
            width: .85rem;
        }

        .aui-list .describe .aui-list-item-text {
            align-items: flex-end;
            color: black;
        }

        .aui-list .shop_number_btn {
            display: flex;
            align-items: center;
        }

        .aui-list .shop_number_btn img {
            width: .95rem;
        }

        .aui-list .shop_number_btn .number {
            padding: 0 .5rem;
            font-size: .8rem;
        }

        #footer {
            height: 2.25rem;
            line-height: 2.25rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            padding-left: .75rem;
        }

        #footer:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #F0F0F0;
            left: 0;
            top: 1px;
        }

        #footer .aui-radio {
            margin-right: .3rem;
        }

        #footer .radio,
        #footer .price,
        #footer .accounts {
            text-align: center;
        }

        #footer .accounts {
            background: #F50000;
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-content">
            <div class="aui-card-list" v-for="data in list">
                <div class="aui-card-list-header">
                    <input class="aui-radio" type="checkbox" name="shop" @click="shopCheck($event)"> <span class="shop_name" @click="shop(data.shop_name, data.shop_id)">{{data.shop_name}}</span>
                </div>
                <div class="aui-card-list-content">
                    <ul class="aui-list aui-media-list">
                        <li class="aui-list-item" v-for="goods in data.goods">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-media radio_media">
                                    <input class="aui-radio" type="checkbox" name="goods" @click="goodsCheck($event, data.goods)" :value="goods.cart_id" :price="goods.price" :num="goods.num">
                                </div>
                                <div class="aui-list-item-media">
                                    <img :src="goods.pic">
                                </div>
                                <div class="aui-list-item-inner describe">
                                    <div class="aui-list-item-text">
                                        <div class="aui-ellipsis-2">{{goods.gname}}</div>
                                        <div class="aui-text-danger">￥<span class="aui-font-size-16">{{goods.price}}</span></div>
                                    </div>
                                    <div class="aui-list-item-text">
                                        <div class="shop_number_btn">
                                            <div class="btn_minus" @click="minus(goods.cart_id)"><img src="../../../image/icon/jian.png" alt=""></div>
                                            <div class="number">{{goods.num}}</div>
                                            <div class="btn-plus" @click="plus(goods.cart_id)"><img src="../../../image/icon/jia.png" alt=""></div>
                                        </div>
                                        <div @click="del(goods.cart_id)"><img src="../../../image/icon/shan.png" alt=""></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <footer class="aui-row" id='footer'>
            <div class="aui-col-xs-3 radio">
                <div class="aui-list-item-label">
                    <input class="aui-radio" type="checkbox" name="checkAll" @click="checkAll($event)"> 全选
                </div>
            </div>
            <div class="aui-col-xs-5 price aui-text-danger">合计：￥{{sumPrice}}</div>
            <div class="aui-col-xs-4 accounts" @click="order_clearing()">去结算({{checkList.length}})</div>
        </footer>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();

        vm.init();
    }
    var vm = new Vue({
        el: "#app",
        data: {
            userInfo: {},
            list: {},
            checkList: [],
            sumPrice: 0
        },
        methods: {
            init() {
                this.userInfo = get_local('userInfo');
                this.getListData();
            },
            getListData() {
                var self = this;
                _ajax(Config.api.CartIndex, {
                    user_id: self.userInfo.user_id
                }, function(res) {
                    if (res.code === 200) {
                        self.list = res.data;
                        setTimeout(function() {
                            self.caculate();
                        }, 200);
                    }
                })
            },
            //减
            minus(cart_id) {
                var self = this;
                _ajax(Config.api.CartMinusnum, {
                    cart_id: cart_id
                }, function(res) {
                    if (res.code === 200) {
                        self.getListData();
                    }
                });
            },
            //加
            plus(cart_id) {
                var self = this;
                _ajax(Config.api.CartPlusnum, {
                    cart_id: cart_id
                }, function(res) {
                    if (res.code === 200) {
                        self.getListData();
                    }
                });
            },
            //删除
            del(cart_id) {
                var self = this;
                _ajax(Config.api.CartDel, {
                    cart_id: cart_id
                }, function(res) {
                    if (res.code === 200) {
                        self.getListData();
                    }
                });
            },
            //商品选中
            goodsCheck(event, goodsList) {
                var self = this;
                var obj = event.currentTarget;
                var val = String(obj.value);

                if (obj.checked) {
                    self.checkList.push(val);
                    //判断店铺下的商品是否全选
                    var shopAll = goodsList.every(function(itemValue) {
                        return (self.checkList.indexOf(String(itemValue.cart_id)) != -1);
                    });

                    if (shopAll) {
                        $(obj).parents('.aui-card-list-content').prev().find('input').prop('checked', true);

                        //判断店铺是否全部选中
                        var checkall = true;
                        $('input[name="shop"]').each(function(k, v) {
                            if (v.checked == false) {
                                checkall = false;
                            }
                        })

                        if (checkall) {
                            $('input[name="checkAll"]').prop('checked', true);
                        }
                    }
                } else {
                    self.checkList.splice(self.checkList.indexOf(val), 1);
                    //店铺取消选中
                    $(obj).parents('.aui-card-list-content').prev().find('input').prop('checked', false);
                    //全选取消选中
                    $('input[name="checkAll"]').prop('checked', false);
                }

                this.caculate();
                console.log(JSON.stringify(self.checkList));
            },
            //店铺选中
            shopCheck(event) {
                var self = this;
                var obj = event.currentTarget;

                if (obj.checked) {
                    //商品全部选中
                    $(obj).parent('.aui-card-list-header').next().find('input').each(function(k, v) {
                        if (self.checkList.indexOf(String(v.value)) == -1) {
                            self.checkList.push(String(v.value));
                            $(v).prop('checked', true);
                        }
                    });

                    //判断店铺是否全部选中
                    var checkall = true;
                    $('input[name="shop"]').each(function(k, v) {
                        if (v.checked == false) {
                            checkall = false;
                        }
                    })

                    if (checkall) {
                        //全选选中
                        $('input[name="checkAll"]').prop('checked', true);
                    }
                } else {
                    //商品全部取消选中
                    $(obj).parent('.aui-card-list-header').next().find('input').each(function(k, v) {
                        self.checkList.splice(self.checkList.indexOf(String(v.value)), 1);
                        $(v).prop('checked', false);
                    });
                    //全选取消选中
                    $('input[name="checkAll"]').prop('checked', false);
                }

                this.caculate();
                console.log(JSON.stringify(self.checkList));
            },
            //全选
            checkAll(event) {
                var self = this;
                var obj = event.currentTarget;

                if (obj.checked) {
                    //店铺全部选中
                    $('input[name="shop"]').prop('checked', true);
                    //商品全部选中
                    $('input[name="goods"]').each(function(k, v) {
                        if (self.checkList.indexOf(String(v.value)) == -1) {
                            self.checkList.push(String(v.value));
                            $(v).prop('checked', true);
                        }
                    });
                } else {
                    //店铺全部取消选中
                    $('input[name="shop"]').prop('checked', false);
                    //商品全部取消选中
                    $('input[name="goods"]').each(function(k, v) {
                        self.checkList.splice(self.checkList.indexOf(String(v.value)), 1);
                        $(v).prop('checked', false);
                    });
                }

                this.caculate();
                console.log(JSON.stringify(self.checkList));
            },
            caculate() {
                var newArr = [];
                $('input[name="goods"]').each(function(k, v) {
                    if (v.checked) {
                        newArr.push({
                            'price': v.getAttribute('price'),
                            'num': v.getAttribute('num')
                        })
                    }
                });

                //归零
                this.sumPrice = 0;
                for (var j = 0, len = newArr.length; j < len; j++) {
                    this.sumPrice += newArr[j].price * newArr[j].num;
                }
            },
            order_clearing() {
                if (this.checkList.length == 0) {
                    $toast('您好没有选择宝贝哦');
                    return false;
                }
                open_w('shopping_order_clearing', './shopping_order_clearing_win.html', {
                    checkList: this.checkList
                });
            },
            shop(name, id) {
                open_w('shop', './shop_win.html', {
                    name: name,
                    shop_id: id
                }, true, true);
            }
        }
    });
</script>

</html>
